﻿<template>
    <div class="person">
        <h1>情况三:监视reactive 定义的对象类型 数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改人</button>
        <hr>
        <h2>测试:{{ obj.a.b.c }}</h2>
        <button @click="test">测试修改</button>
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    import { ref,reactive ,toRefs,computed,watch} from 'vue';
    let person = reactive({
        name: '张三',
        age: 18
    });
    let obj = reactive({
        a:{
            b:{
                c:666
            }
        }
    })
    function changeName() {
        person.name += '~';
    }
    function changeAge() {
        person.age += 1;
    }
    function changePerson() {
        // reactive 不能直接修改整体
        // 【1】地址修改
        // person = {
        //     name: '李四',
        //     age: 20
        // };

        // 【2】地址未变，值覆盖
        Object.assign(person,{name:'李四',age:90})
    }
    function test(){
        // obj 如果是ref 想要深度监视，必须deep:true
        // obj 如果是reactive，默认是深度监视，且无法关闭
        
        // obj 如果是reactive，以下两种写法都是深度监视
        // obj.a.b.c = 999
        Object.assign(obj,{a:{b:{c:1}}})
    }
    // watch 情况三:监视reactive 定义的对象类型 数据，默认是开启深度监视
    // 第一个参数是：被监视的数据，
    // 第二个参数是：监视回调函数，
    // 第三个参数是：配置项（deep immmediate）
    watch(person, (newValue, oldValue) => {
        console.log('person变化', oldValue,newValue);
    },{deep: true }); 

    watch(obj, (newValue, oldValue) => {
        console.log('obj变化', oldValue,newValue);
    },{deep:true}); 
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>